<template>
  <div class="login-container">
    <!--
      el-form 表单组件
      每个表单项都必须使用 el-form-item 组件包裹
    -->
    <el-form class="login-from" ref="login_form" :model="user" :rules="fromRules">
      <!-- 配置from表单验证
          1.必须给el-from 组件绑定 model 为表单数据对象
          2.给表单需要验证的表单el-form-item 绑定 prop属性
          注意prop属性需要指定表单对象中的名称
          3.通过 el-from 组件 rules 属性配置验证规则

          手动触发表单验证
          1.el-from 设置ref 起个名字 随便起名不重复即可
          2.通过ref 获 el-from 组件 调用组件的validate 进行验证
      -->
      <el-form-item prop="mobile">
        <el-input v-model="user.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="user.code" placeholder="请输入验证码"></el-input>
      </el-form-item>
      <el-form-item prop="agree">
        <!-- prop自定义验证 -->
        <el-checkbox v-model="user.agree">我已阅读并同意用户协议和隐私条款</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button class="login_btn" type="primary" @click="onLogin" :loading="loginLoading">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//• 13911111111
//• 246810
// import request from "@/utils/request";这里不需要了，在封装api的login，把他放在api里面
import { login } from "@/api/user";
export default {
  name: "index",
  data() {
    return {
      user: {
        mobile: "13911111111", //手机号
        code: "246810", //验证码
        agree: false, //是否同意协议-验证协议
      },
      /// checked: false, ///同意协议状态 z之前的协定状态-替换了agree
      loginLoading: false, ////登录状态
      fromRules: {
        ///表单验证规则配置
        mobile: [
          //要验证的数据名称
          { required: true, message: "手机号不能为空", trigger: "change" },
          {
            pattern: /^1[3|5|7|8|9]\d{9}$/,
            message: "请输入正确号码格式",
            trigger: "change",
          },
        ],
        code: [
          //要验证的数据名称
          { required: true, message: "验证码不能为空", trigger: "change" },
          { pattern: /^\d{6}$/, message: "请输入正确的验证码格式" },
        ],
        agree: [
          //validator :验证协议-后面的validatePass是个函数，有3个参数
          //rule--表单输入的数据值
          //value  --本次选中的值
          {
            validator: (rule, value, callback) => {
              //验证通过callback()  需要调用一下
              //验证失败 callback()  失败也需要调用  callback(new Error("请勾选用户协议"));

              if (value) {
                callback();
              } else {
                callback(new Error("请勾选用户协议"));
              }
            },
            // message: "请阅读且同意用户协议条款",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    onLogin() {
      const user = this.user;
      //获取表单数据
      //表单验证
      // console.log(this.$refs["login-from"]);
      this.$refs["login_form"].validate((valid, err) => {
        if (!valid) {
          return;
        }
        //验证通过,提交登录
        this.login(); ///引入封装好的axios
        //通过验证跳转到首页
      });
    },
    login() {
      /////////封装登录
      //开启登录中
      this.loginLoading = true;
      ///对于代码请求操作
      //1.接口请求的可能需要重复使用
      //2.实际工作中，接口是非常容易变动的，改起来非常麻烦
      //3.我们建议把所有的请求都封装成函数然后统一到组织的模块中进行管理
      //这样做的好处方便管理和维护，也好重复使用
      // 这里就在api中做成一个函数方便调用
      // request({
      //   method: "POST",
      //   url: "/mp/v1_0/authorizations",
      //   data: this.user, ///data 用来设置请求体
      // })-----------------放到了api的user中封装完毕后login来调用传入this.user
      login(this.user)
        .then((res) => {
          console.log(res);
          this.$message({
            message: "登录成功",
            type: "success",
          });
          this.loginLoading = false;
          window.localStorage.setItem("user", JSON.stringify(res.data.data));
          this.$router.push("/");
        })
        .catch((err) => {
          console.log("登录失败");
          this.$message.error("登陆失败，手机号或验证码有误！");
          //关闭loading
          this.loginLoading = false;
        });

      //处理后端响应结果
      //成功：xx
      //失败:xxx
    },
  },
};
</script>

<style scoped lang='scss'>
.login-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("./login_bg.jpg") no-repeat;
  background-size: cover; //背景填充模式

  .login-from {
    background: #fff;
    opacity: 0.8;
    padding: 50px;
    min-width: 300px;

    box-shadow: 2px 2px 20px 2px #fff;
    .login_btn {
      width: 100%;
    }
  }
}
</style>
